import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import '../../util/screen_util.dart';

import 'package:flutter/material.dart';

class MyBanner extends HookWidget {
  const MyBanner({super.key});

  @override
  Widget build(BuildContext context) {
    var screen = Screen(context);
    var current = useState(0);
    final items=[
      'assets/tmp_slider_1.png',
      'assets/tmp_slider_2.png',
      'assets/tmp_slider_3.png',
    ];
    return Stack(
      children: [
        Container(
          margin: EdgeInsets.only(top: screen.calc(40)),
          child: CarouselSlider(
            options: CarouselOptions(
              onPageChanged: (val, reason){
                current.value=val;
              },
              height: screen.calc(268),
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 3),
              autoPlayAnimationDuration: Duration(microseconds: 500),
              autoPlayCurve: Curves.easeInOut,
              enlargeCenterPage: true,
              scrollDirection: Axis.horizontal,
            ),
            items: items.map((item)=>Builder(builder: (context){
              return Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(item),
                    fit: BoxFit.fill,
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(screen.calc(45))),
                ),
              );
            })).toList(),
          ),
        ),
        Positioned(
          bottom: screen.calc(32),
          left: (screen.width-screen.calc((12))*items.length)/2,
          child: Container(
            child: Row(
              children: items.asMap().map((index,item)=>MapEntry(
                  index,
                  Container(
                    margin: EdgeInsets.only(left: screen.calc(4), right: screen.calc(4)),
                    width: screen.calc(12),
                    height: screen.calc(12),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(screen.calc(6)),
                      color: index==current.value?Color(0xFFff3a3a):Color(0xaaffffff),
                    ),
                  )
              )).values.toList(),
            ),
          ),
        ),
      ],
    );
  }
}
